<template>
  <div>
    <a-card :bordered="false">
      <a-tabs @tabClick="handleTabClick" :defaultActiveKey="current" v-model="current" tabPosition="left" :style="{ height: 'auto'}">

        <a-tab-pane tab="全部" key="0">
          <list-all ref="tab0"></list-all>
        </a-tab-pane>

        <a-tab-pane key="1">
           <span slot="tab">
              <a-badge :count="orderCount.tab1" style="top: -2px"></a-badge> 待付款
            </span>
          <list-all ref="tab1" @countOrder="countOrder"></list-all>
        </a-tab-pane>
        <a-tab-pane key="20">
          <span slot="tab">
              <a-badge :count="orderCount.tab20" style="top: -2px"></a-badge> 待发货
            </span>
          <list-all ref="tab20" @countOrder="countOrder"></list-all>
        </a-tab-pane>
        <a-tab-pane key="21">
          <span slot="tab">
              <a-badge :count="orderCount.tab21" style="top: -2px"></a-badge> 待收货
            </span>
          <list-all ref="tab21" @countOrder="countOrder"></list-all>
        </a-tab-pane>
        <a-tab-pane key="3">
           <span slot="tab">
              <a-badge :count="orderCount.tab3" style="top: -2px"></a-badge> 已完成
            </span>
          <list-all ref="tab3" @countOrder="countOrder"></list-all>
        </a-tab-pane>
        <a-tab-pane key="4">
           <span slot="tab">
              <a-badge :count="orderCount.tab4" style="top: -2px"></a-badge> 已取消
            </span>
          <list-all ref="tab4" @countOrder="countOrder"></list-all>
        </a-tab-pane>
        <a-tab-pane key="5">
           <span slot="tab">
              <a-badge :count="orderCount.tab5" style="top: -2px"></a-badge>已退款
            </span>
          <list-all ref="tab5" @countOrder="countOrder"></list-all>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import ListAll from './list_all'

  export default {
    name: 'ProductOrder',
    components: { ListAll },
    data() {
      return {
        current: '0',
        tag: false,
        offset: [-18, -8],
        orderCount: {}
      }
    },
    created() {
      this.countOrder()
    },
    mounted() {
      this.handleTabClick('0')

    },
    methods: {
      handleTabClick(key) {
        this.current = key
        this.$nextTick(() => {
          this.$refs['tab' + this.current].setData(key)
        })
      },
      countOrder() {
        this.http.get(this, {
          url: this.api.order.countByOrderState,
          data: {},
          success: function(me, data) {
              me.orderCount = data
          }
        })
      }
    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">


</style>
